<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model='keyword' @keyup.enter="keyupHander" />
    </div>
</template>

<script setup lang="ts">
import type { TodosModel } from '@/App.vue'
import { ref } from 'vue'
const props = defineProps<{
    todos: TodosModel,
    addTodo: Function
}>()
const keyword = ref('')
const keyupHander = () => {
    let text = keyword.value.trim();// String.prototype.trim() 去除字符串首尾两端的空格得到一个新的字符
    // 判断不能为空
    if (!text) {
        alert('输入的内容不能为空')
        return
    }

    // 判断有没重复（需要拿到todos来进行判断）
    const isRepeat = props.todos.some(item => item.content == text)
    if (isRepeat) {
        alert('输入的内容不能重复')
        keyword.value = '';// 将输入的内容清空 
        return
    }

    // 添加todo
    props.addTodo({
        id: Date.now(),// 获取时间戳 -- Date.now()  --  new Date().getTime()
        content: text,
        isSel: false
    })
    // 添加完之后，清空input框
    keyword.value = ''
}


</script>

<style scoped>
/*header*/
.todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}

.todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>